<template>
  <header>
    <Demo></Demo>
    <br/>
    <br/>
    <br/>
    <hr/>
    <!-- Tooltip文字提示 -->
    <div class="tooltip_box">
      <Tooltip ref="tooltipRef" :open-delay="3" :close-delay="2">
        <img alt="Vue logo" src="./assets/logo.png" />
        <template #content>
          <h1>hello aa</h1>
        </template>
      </Tooltip>
    </div>
    <HelloWorld></HelloWorld>

  </header>
  <main>
    <!-- {{ $echo('vking') }} -->
    <!-- 按钮 -->
     <v-button>v-button</v-button>
    <Button type="success" ref="buttonRef" @click="open">Success按钮</Button>
    <Button type="primary" @click="close">primary按钮</Button>
    <Button type="info">Info按钮</Button>
    <Button type="warning">Warning按钮</Button>

    <Button plain>plain按钮</Button>
    <Button round>round按钮</Button>
    <Button circle>circle按钮</Button>
    <Button disabled>disabled按钮</Button>

    <Button size="small">small按钮</Button>
    <Button size="large">large按钮</Button>

    <Button size="large" loading>loading按钮</Button>
    <Button size="large" icon="arrow-up">arrow-up按钮</Button>

    <!-- 折叠面板 -->
    <Collapse v-model="openValue">
      <CollapseItem name="a">
        <template #title>
          <h1>nice title</h1>
        </template>
        <h1>headline title</h1>
        <div>this is a content</div>
      </CollapseItem>
      <CollapseItem name="b" title="title22">
        <div>this is bbb content</div>
      </CollapseItem>
      <CollapseItem name="c" title="title33" disabled>
        <div>this is ccc content</div>
      </CollapseItem>
    </Collapse>

    <!-- 图标 -->
    <font-awesome-icon :icon="['fat', 'user-secret']" />
    <Icon :icon="['fas', 'user-secret']" type="primary"></Icon>
    <Icon icon="arrow-up" type="success" color="red"></Icon>

    <!-- 下拉框 -->
    <Dropdown :menu-options="menuOptions">下拉框</Dropdown>

    <!-- Message弹框 -->
    <!-- <Message message="hello" :show-close="true" ></Message> -->

    <!-- Input 输入框 -->
    <Input
      type="password"
      :showPassword="true"
      v-model="modelValue"
      :clearable="true"
      placeholder="请输入"
    >
      <template #prepend>http://</template>
      <template #prefix><Icon icon="arrow-up" type="success"></Icon></template>
      <!-- <template #suffix
        ><Icon :icon="['fas', 'user-secret']" type="primary"></Icon
      ></template> -->
      <template #append>.com</template>
    </Input>
    <Input type="textarea" v-model="modelValue"></Input>
    {{ modelValue }}
    <br />
    <br />
    <!-- Switch 开关 -->
    <Switch active-text="开启" inactive-text="关闭"></Switch>

    <!-- Select 选择框 -->
    <Select
      :options="selectOptions"
      v-model="selectValue"
      :clearable="true"
      :render-label="customRender"
      :filterable="true"
    ></Select>
    <br />
    <br />
    <!-- Form 表单 -->
    <Form :model="model" :rules="rules" ref="formRef">
      <FormItem label="邮箱" prop="email">
        <!-- <template #label="{ label }">
          <button>{{ label }}</button>
        </template> -->
        <Input v-model="model.email" type="text"></Input
      ></FormItem>
      <FormItem label="密码" prop="password">
        <Input v-model="model.password" type="text"></Input>
      </FormItem>
      <FormItem label="确认密码" prop="confirmPwd">
        <Input v-model="model.confirmPwd" type="text"></Input>
      </FormItem>
      <!-- <FormItem label="姓名" prop="name">
        <template #default="{validate}">
            <input type="text" v-model="model.name" @blur="validate"/>
        </template>
      </FormItem> -->
      <Button @click.prevent="submit">提交</Button>
      <Button @click.prevent="clearForm">重置</Button>
      <Button @click.prevent="clearValidate">清除校验</Button>
    </Form>
    <p>
        form value:
        <pre>{{ model }}</pre>
    </p>
  </main>
</template>

<script setup lang="ts">
import {
  defineComponent,
  useTemplateRef,
  ref,
  onMounted,
  h,
  reactive,
  inject,
} from "vue";
import Demo from "./components/Demo.vue";
import Button from "./components/Button/Button.vue";
import type { ButtonInstance } from "./components/Button/types";
import Collapse from "./components/Collapse/Collapse.vue";
import CollapseItem from "./components/Collapse/CollapseItem.vue";
import Icon from "./components/Icon/Icon.vue";
import Tooltip from "./components/Tooltip/Tooltip.vue";
import { TooltipInstance } from "./components/Tooltip/types";
import type { Options } from "@popperjs/core";
import Dropdown from "./components/Dropdown/Dropdown.vue";
import { MenuOptions } from "./components/Dropdown/types";
import Message from "./components/Message/Message.vue";
import { createMessage } from "./components/Message/methods";
import Input from "./components/Input/Input.vue";
import Switch from "./components/Switch/Switch.vue";
import Select from "./components/Select/Select.vue";
import { SelectOption } from "./components/Select/types";
import Form from "./components/Form/Form.vue";
import FormItem from "./components/Form/FormItem.vue";
import { FormRules } from "./components/Form/types";
import HelloWorld from "./components/HelloWorld.vue";

defineOptions({
  name: "App",
});
console.log(inject('test'));

const buttonRef = ref<ButtonInstance | null>(null);
const openValue = ref(["a"]);
const tooltipRef = ref<TooltipInstance | null>(null);
const menuOptions: MenuOptions[] = [
  { label: h("b", "item加粗"), key: 1 },
  { label: "item2", key: 2, disabled: true },
  { label: "item3", key: 3, divided: true },
  { label: "item4", key: 4 },
];
const modelValue = ref("");
const selectOptions: SelectOption[] = [
  { label: "item11111", value: "1" },
  { label: "item22222", value: "2", disabled: true },
  { label: "item33333", value: "3" },
  { label: "item44444", value: "4" },
];
const selectValue = ref("1");
const model = reactive({
  email: "",
  password: "",
  confirmPwd:""
});
const rules:FormRules = {
  email: [{ required: true, type: "email" ,trigger:'input'}],
  password: [{ required: true, type: "string",min:3,max:5,trigger:'blur' }],
  confirmPwd: [{ required: true, type: "string",min:3,max:5,trigger:'blur'},
  {validator:(rule,value)=>value===model.password,trigger:'blur',message:"两个密码必一致"} ],
};
const formRef=ref()

// 自定义选框的渲染函数
const customRender = (option: SelectOption) => {
  return h("div", { class: "vk-select__item-custom" }, [
    h("b", option.label),
    h("span", option.value),
  ]);
};

// 设置tooltip的显示样式
const Options: Partial<Options> = {
  placement: "right-end",
  strategy: "fixed",
};

const open = () => {
  tooltipRef.value?.show();
};
const close = () => {
  tooltipRef.value?.hide();
};

onMounted(() => {
  if (buttonRef.value) {
    console.log("buttonRef-->", buttonRef.value.ref);
  }

  const instance = createMessage({
    message: "hello1",
    duration: 0,
    showClose: true,
  });
//   createMessage({ message: "hello2", duration: 0, showClose: true });
//   createMessage({ message: "hello3", duration: 0, showClose: true });

  setTimeout(() => {
    instance.destroy();
  }, 2000);
});

const submit= async()=>{
    try{
        await formRef.value.validate()
    } catch(e){
    }
}

const clearForm=()=>{
    formRef.value.resetFields()
}

const clearValidate=()=>{
    formRef.value.clearValidate()
}
</script>

<style lang="less">
#app {
}

.tooltip_box {
  width: 300px;
  height: 300px;
}

.vk-select__item-custom {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
